<template>

    <div id="app">
      <TabBar v-if="loginrouter === false" :title="title"></TabBar>

    
  <router-view v-slot="{ Component }">
    <keep-alive >
      <component :is="Component"/>
    </keep-alive>

  </router-view>

    </div>

</template>

<script>
import TabBar from './components/tabbar/TabBar.vue'
import Login from './views/Login.vue'
import Home from './views/Home.vue'
import DeviceTabBar from './components/tabbar/DeviceTabBar.vue'
export default {
  data() {
    return {
      loginrouter: false,
      title: ''
    }
  },
  watch: {
    $route: {
      handler(val) {
        // console.log(val);//新路由信息
        // console.log(oldval);//老路由信息
        if (val.name == 'login' || val.name == 'home') {
          this.loginrouter = true;
        } else {
          this.loginrouter = false;
        }
        this.title = val.name === 'device' ? '设备管理' : '帮助中心'
      },
      // 深度观察监听
      deep: true,
      immediate: true
    },
  },
  components: {
    Login,
    Home,
    TabBar,
    DeviceTabBar
  },


}
</script>

<style lang="less" scoped></style>

<!-- 
<template>
     <div class="screen-wrapper">
        <div class="screen" id="screen">
          <TabBar v-if="loginrouter==false"></TabBar>
<router-view></router-view>
        </div>
     </div>
</template>

<script>
import TabBar from './components/tabbar/TabBar.vue'
import Login from './views/Login.vue'
import Home from './views/Home.vue'
export default {
  data(){
    return {
      loginrouter:false
    }
  },
  watch:{
    $route:{
      handler(val){
        // console.log(val);//新路由信息
        // console.log(oldval);//老路由信息
        this.loginrouter = val.name === 'login' ? true : false;

      },
      // 深度观察监听
      deep: true
    },
  },
  components: {
    Login,
    Home,
    TabBar
},
  mounted(){
        //初始化自适应  ----在刚显示的时候就开始适配一次
        this.handleScreenAuto();
        //绑定自适应函数   ---防止浏览器栏变化后不再适配
        // window.onresize
        window.onresize = this.handleScreenAuto();
    },
    deleted(){
        window.onresize = null;
    },
    methods: {
        //数据大屏自适应函数
        handleScreenAuto(){
            const designDraftWidth = 1920;//设计稿的宽度
            const designDraftHeight = 960;//设计稿的高度
            //根据屏幕的变化适配的比例
            const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
                (document.documentElement.clientWidth / designDraftWidth) :
                (document.documentElement.clientHeight / designDraftHeight);
            //缩放比例
            console.log(document.getElementById("screen").style);
            document.getElementById("screen").style.transform = `scale(${scale}) translate(-50%)`;
        }
    }
}
</script>

<style lang="less" scoped>
 .screen-wrapper {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920PX;  //设计稿的宽度
        height:960px;  //设计稿的高度
        // transform-origin: 0 0;
        // position: absolute;
        // left: 50%;
        }
    }
</style> -->